<template>
    <view class="progress-bar-container">
        <view class="progress-bar-border">
            <view 
                class="progress-bar-fill" 
                :style="{ width: displayProgress + '%' }"
            ></view>
        </view>
        <view class="progress-text">{{ displayProgress }}%</view>
    </view>
</template>

<script>
export default {
    name: 'ProgressBar',
    props: {
        progress: {
            type: Number,
            default: 0,
            validator: (value) => value >= 0 && value <= 100
        },
        duration: {
            type: Number,
            default: 2000 // 默认2秒完成
        },
        autoStart: {
            type: Boolean,
            default: false
        },
        isOpening: {
            type: Boolean,
            default: true // true表示开启，false表示关闭
        }
    },
    data() {
        return {
            currentProgress: 0,
            animationTimer: null
        }
    },
    watch: {
        autoStart(newVal) {
            if (newVal) {
                this.startAnimation()
            }
        },
        isOpening() {
            if (this.autoStart) {
                this.startAnimation()
            }
        },
        duration() {
            if (this.autoStart) {
                this.startAnimation()
            }
        }
    },
    mounted() {
        if (this.autoStart) {
            this.startAnimation()
        }
    },
    beforeDestroy() {
        if (this.animationTimer) {
            clearTimeout(this.animationTimer)
        }
    },
    methods: {
        startAnimation() {
            if (this.animationTimer) {
                clearTimeout(this.animationTimer)
            }
            
            const startProgress = this.isOpening ? 0 : 100
            const endProgress = this.isOpening ? 100 : 0
            const startTime = Date.now()
            const frameRate = 16 // 约60fps，每16ms更新一次
            
            const animate = () => {
                const elapsed = Date.now() - startTime
                const progress = Math.min(elapsed / this.duration, 1)
                
                // 使用缓动函数
                const easeProgress = this.easeInOutCubic(progress)
                this.currentProgress = startProgress + (endProgress - startProgress) * easeProgress
                
                if (progress < 1) {
                    this.animationTimer = setTimeout(animate, frameRate)
                } else {
                    this.currentProgress = endProgress
                    this.$emit('complete')
                }
            }
            
            this.currentProgress = startProgress
            animate()
        },
        
        // 缓动函数
        easeInOutCubic(t) {
            return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
        },
        
        // 重置进度条
        reset() {
            if (this.animationTimer) {
                clearTimeout(this.animationTimer)
            }
            this.currentProgress = 0
        }
    },
    computed: {
        displayProgress() {
            return Math.round(this.currentProgress)
        }
    }
}
</script>

<style lang="scss" scoped>
.progress-bar-container {
    display: flex;
    align-items: center;
    width: 80rpx;
    height: 44rpx;
    position: relative;
}

.progress-bar-border {
    width: 80rpx;
    height: 44rpx;
    border: 2rpx solid rgba(193, 239, 243, 0.3);
    border-radius: 22rpx;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2d6040 0%, #2d6040 100%);
    border-radius: 22rpx;
    transition: width 0.1s ease-out;
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        animation: shimmer 2s infinite;
    }
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    font-size: 20rpx;
    color: #ffffff;
    text-shadow: 0 0 6rpx rgba(0, 0, 0, 0.8);
    z-index: 2;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
</style>
